<template>
    <view>
        <navView navTitle="积分明细" backgroundColor="#008efe" titleColor="#fff" :isBack="true"></navView>
        <view class="container">
            <!-- 统计卡片 -->
            <view class="stats-card">
                <view class="stat-item">
                    <text class="label">当前积分</text>
                    <text class="value">{{ total }}</text>
                </view>
            </view>

            <!-- 积分列表 -->
            <view class="integral-list">
                <view class="list-header">
                    <text class="header-item">事由</text>
                    <text class="header-item">变动积分</text>
                    <text class="header-item">时间</text>
                </view>

                <view class="list-item" v-for="(item, index) in integralList" :key="index">
                    <text class="user-info">{{ item.reason }}</text>
                    <text :class="['score', item.points > 0 ? 'positive' : 'negative']">
                        {{ item.points > 0 ? '+' : '' }}{{ item.points }}
                    </text>
                    <text class="time">{{ formatTime(item.createtime) }}</text>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            integralList: [],
            id: '',
            total:0,
        }
    },
    onLoad(option) {
        console.log(option);
        this.id = option.id
        this.getIntegralList()
    },
    methods: {
        async getIntegralList() {
            try {
                const res = await this.$request('/addons/qingdong/score/getScoreList', 'GET', {
                    id: this.id
                })
                this.integralList = res.data.data || []
                this.total = res.data.balance
            } catch (err) {
                console.error('获取积分数据失败:', err)
                uni.showToast({ title: '数据加载失败', icon: 'none' })
            }
        },
        formatTime(timestamp) {
            const date = new Date(timestamp * 1000)
            const year = date.getFullYear()
            const month = (date.getMonth() + 1).toString().padStart(2, '0')
            const day = date.getDate().toString().padStart(2, '0')
            const hours = date.getHours().toString().padStart(2, '0')
            const minutes = date.getMinutes().toString().padStart(2, '0')
            return `${year}-${month}-${day} ${hours}:${minutes}`
        }
    }
}
</script>

<style lang="scss">
.container {
    padding: 20rpx;
}

.stats-card {
    background: #fff;
    border-radius: 16rpx;
    padding: 30rpx;
    margin-bottom: 30rpx;
    display: flex;
    justify-content: space-around;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);

    .stat-item {
        display: flex;
        flex-direction: column;
        align-items: center;

        .label {
            font-size: 28rpx;
            color: #999;
            margin-bottom: 10rpx;
        }

        .value {
            font-size: 40rpx;
            font-weight: bold;
            color: #333;
        }
    }
}

.integral-list {
    background: #fff;
    border-radius: 16rpx;
    overflow: hidden;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);

    .list-header {
        display: flex;
        justify-content: space-between;
        padding: 24rpx 30rpx;
        background: #f8f9fb;
        border-bottom: 1rpx solid #eee;

        .header-item {
            font-size: 28rpx;
            color: #666;
            flex: 1;
            text-align: center;

            &:first-child {
                text-align: left;
            }

            &:last-child {
                text-align: right;
            }
        }
    }

    .list-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 30rpx;
        border-bottom: 1rpx solid #eee;

        &:last-child {
            border-bottom: none;
        }

        .user-info {
            flex: 1;
            display: flex;
            align-items: center;
            font-size: 25rpx;
            .avatar {
                width: 60rpx;
                height: 60rpx;
                border-radius: 50%;
                margin-right: 20rpx;
            }
        }

        .score {
            flex: 1;
            text-align: center;
            font-weight: 500;

            &.positive {
                color: #4CD964;
            }

            &.negative {
                color: #DD524D;
            }
        }

        .time {
            flex: 1;
            text-align: right;
            font-size: 24rpx;
            color: #999;
        }
    }
}
</style>